<template>
  <div class="chart-title" v-if="$slots.title">
    <slot name="title"></slot>
  </div>
  <Chart style="width: 100%; height: 347px" :option="chartOption" />
</template>

<script>
// 折线图 - 多条线示意
import { graphic } from 'echarts';

// 多条折线时使用
export default {
  name: "line-chart-more",
  data() {
    return {
      chartOption:{},
      // 上一次显示的tooltip所在的x刻度线
      lastShowXStr:'',
    }
  },
  beforeCreate() {

  },
  created() {

  },
  mounted() {
    // 服务端返回的折线图数据源
    const chartData = [
      {
        x:'0:00',
        y:'89',
        y2:'36',
      },
      {
        x:'2:00',
        y:'69',
        y2:'88',
      },
      {
        x:'4:00',
        y:'89',
        y2:'64',
      },
      {
        x:'6:00',
        y:'42',
        y2:'65',
      },
      {
        x:'8:00',
        y:'86',
        y2:'77',
      },
      {
        x:'10:00',
        y:'82',
        y2:'37',
      },
      {
        x:'12:00',
        y:'88',
        y2:'33',
      },
      {
        x:'14:00',
        y:'78',
        y2:'62',
      },
      {
        x:'16:00',
        y:'70',
        y2:'69',
      },
      {
        x:'18:00',
        y:'56',
        y2:'70',
      },
      {
        x:'20:00',
        y:'37',
        y2:'50',
      },
      {
        x:'22:00',
        y:'55',
        y2:'41',
      },
    ]

    // 每个点位置处理
    let graphicElements = [this.graphicFactory({ left: '2.6%' }), this.graphicFactory({ right:0})]

    // 根据服务端返回的数据分离出x y轴数据
    let xAxis = []
    let yAxis = []
    let yAxis2 = []

    chartData.forEach((el, idx) => {
      xAxis.push(el.x);
      yAxis.push(el.y);

      // 折线2对应的y值
      let value = parseInt(el.y) + 10
      yAxis2.push(el.y2)

      if (idx === 0) {
        // 第一个点
        graphicElements[0].style.text = el.x;
      }
      if (idx === chartData.length - 1) {
        // 最后一个点
        graphicElements[1].style.text = el.x;
      }
    });

    const isDark = false

    let _this = this;

    // 绘制图表
    this.chartOption = {
      // 折线图标题
      // title: {
      //   text: '内容数据',
      // },
      grid: {
        left: '40',
        right: 0,
        top: '20',
        bottom: '100',
      },
      // 当多条折线时 图例配置(需要显示则配置)
      legend: {
        bottom: 0,
        icon: 'circle',
        textStyle: {
          color: '#4E5969',
        },
      },
      // x轴配置项
      xAxis: {
        type: 'category',
        data: xAxis,
        // 坐标是否从0开始 ture不是 反之是
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: isDark ? '#3f3f3f' : '#A9AEB8',
          },
        },
        // 刻度线 就是每个x轴刻度值对应有个小竖线刻度
        axisTick: {
          show: true,
          alignWithLabel: true,
          lineStyle: {
            color: '#86909C',
          },
        },
        axisLabel: {
          // x轴坐标显示全
          interval:0,
          showMaxLabel:true,
          color: '#86909C',
          formatter(value, idx) {
            if (idx === 0) return '';
            if (idx === xAxis.length - 1) return '';
            return `${value}`;
          },
        },
      },
      // y轴配置项
      yAxis: {
        type: 'value',
        axisLabel: {
          color: '#86909C',
          formatter: '{value}%',
        },
        splitLine: {
          lineStyle: {
            color: isDark ? '#3F3F3F' : '#E5E6EB',
          },
        },
      },
      // 对应刻度线的展示tip视图
      tooltip: {
        trigger: 'axis',
        formatter(params) {
          // 每一个刻度线对应的所有类目数据数组
          // console.log('tooltip params:', params)
          const { axisValueLabel, data } = params[0]
          return `<div>
            <p class="tooltip-title">${axisValueLabel}</p>
            ${_this.tooltipItemsHtmlString(params)}
          </div>`;
        },
        className: 'echarts-tooltip-diy',
      },
      graphic: {
        elements: graphicElements,
      },
      // 数据序列化
      series: [
        {
          name: '纯文本',
          data: yAxis,
          type: 'line',
          smooth: true,
          showSymbol: false,
          color: isDark ? '#3D72F6' : '#246EFF',
          symbol: 'circle',
          symbolSize: 10,
          emphasis: {
            focus: 'series',
            itemStyle: {
              borderWidth: 2,
              borderColor: '#E0E3FF',
            },
          },
        },
        {
          name: '图文类',
          data: yAxis2,
          type: 'line',
          smooth: true,
          showSymbol: false,
          color: isDark ? '#A079DC' : '#00B2FF',
          symbol: 'circle',
          symbolSize: 10,
          emphasis: {
            focus: 'series',
            itemStyle: {
              borderWidth: 2,
              borderColor: '#E2F2FF',
            },
          },
        },
      ],
      // 缩放进度条
      dataZoom: [
        {
          bottom: 40,
          type: 'slider',
          left: 40,
          right: 14,
          height: 14,
          borderColor: 'transparent',
          handleIcon:
              'image://http://p3-armor.byteimg.com/tos-cn-i-49unhts6dw/1ee5a8c6142b2bcf47d2a9f084096447.svg~tplv-49unhts6dw-image.image',
          handleSize: '20',
          handleStyle: {
            shadowColor: 'rgba(0, 0, 0, 0.2)',
            shadowBlur: 4,
          },
          brushSelect: false,
          backgroundColor: isDark ? '#313132' : '#F2F3F5',
        },
        {
          type: 'inside',
          start: 0,
          end: 100,
          zoomOnMouseWheel: false,
        },
      ],
    }
  },
  methods:{
    /**
     * 工厂方法
     * @param side
     * @returns {*&{bottom: string, style: {textAlign: string, fontSize: number, text: string, fill: string}, type: string}}
     */
    graphicFactory(side) {
      return {
        type: 'text',
        // 该值会影响使用了此方法来设置的x轴坐标点
        bottom: '80',
        ...side,
        style: {
          text: '',
          textAlign: 'center',
          fill: '#86909C',
          fontSize: 12,
        },
      };
    },

    /**
     * 获取某个刻度线对应的提示视图
     * @param items
     * @returns {*}
     */
    tooltipItemsHtmlString(items) {
      // console.log('items:', items)
      const obj = items && items.length > 0 ? items[0] : { axisValueLabel: '' };
      const tempName = obj.axisValueLabel;
      if (tempName != this.lastShowXStr) {
        this.lastShowXStr = tempName;
        console.log('当前x坐标点：', tempName);
      }

      let html = items
          .map(
              (el) => `<div class="content-panel">
        <p>
          <span style="background-color: ${el.color}" class="tooltip-item-icon"></span>
          <span>${el.seriesName}</span>
        </p>
        <span class="tooltip-value">
        ${el.value}%
        </span>
      </div>`
          )
          .join('');

      // 也可以放到一排展示
      // let finalHtml = '<div style="display: flex">' + html + '</div>'
      // return finalHtml

      return html
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/public.scss";

.chart-box {
  width: 100%;
  height: 230px;
}

.chart-title {
  height: 40px;
  line-height: 40px;
  color: $main-text-color;
  font-size: 16px;
  font-weight: 500;
}
</style>
